#opus {
  background: #6a8c69;
  flex-direction: column; align-items: flex-start;
  padding: 100px 50px 50px;

  dl { display: flex; flex-wrap: wrap; }

  dt {
    font-size: 20px;
    width: 100%;
    margin-bottom: 15px;
  }

  dd {
    width: 300px;
    overflow: hidden;
    margin-right: 20px; margin-bottom: 20px;
    position: relative;
    &:last-of-type { margin-right: 0; }
    &:hover {
      img { transform: scale(1.1); }
      .modal { transform: translateY(0); }
    }
    a { display: block; }
    img { transition: all .25s ease; }
    .modal {
      font-size: 16px;
      width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.7);
      line-height: 1.5;
      display: flex; flex-direction: column; justify-content: flex-end;
      padding: 10px;
      position: absolute; left: 0; top: 0;
      transform: translateY(100%);
      transition: all .25s ease;
    }
  }
  @media screen and (min-width: 981px) and (max-width: 1040px) {
    dd { width: 280px; }
  }
  @media screen and (max-width: 980px) {
    dd { width: 250px; }
  }

  pre {
    font-size: 20px;
    margin-top: 10px;
    > code {
      color: #d63200;
      background: #f6f7f8;
      border-radius: 4px;
      padding: 2px;
    }
  }

  .icon-box {
    width: 100%;
    text-align: center;
    overflow: hidden;
    svg {
      width: 8em; height: 8em;
      margin: -40px 20px 0;
    }
  }
}
